import {
  modelHTML,
  luckysheetchartpointconfigHTML,
  luckysheetToolHTML,
} from '../controllers/constant'
import browser from './browser'
import { replaceHtml } from '../utils/util'
import locale from '../locale/locale'
import server from '../controllers/server'

const tooltip = {
  info: function(title, content) {
    $('#luckysheet-modal-dialog-mask').show()
    $('#luckysheet-info').remove()

    let _locale = locale()
    let locale_button = _locale.button

    $('body')
      .first()
      .append(
        replaceHtml(modelHTML, {
          id: 'luckysheet-info',
          addclass: '',
          title: title,
          content: content,
          botton:
            '<button class="btn btn-default luckysheet-model-close-btn">&nbsp;&nbsp;' +
            locale_button.close +
            '&nbsp;&nbsp;</button>',
          style: 'z-index:100003',
        })
      )
    let $t = $('#luckysheet-info')
        .find('.luckysheet-modal-dialog-content')
        .css('min-width', 300)
        .end(),
      myh = $t.outerHeight(),
      myw = $t.outerWidth()
    let winw = $(window).width(),
      winh = $(window).height()
    let scrollLeft = $(document).scrollLeft(),
      scrollTop = $(document).scrollTop()
    $('#luckysheet-info')
      .css({
        left: (winw + scrollLeft - myw) / 2,
        top: (winh + scrollTop - myh) / 3,
      })
      .show()
  },
  confirm: function(title, content, func1, func2, name1, name2) {
    $('#luckysheet-modal-dialog-mask').show()
    $('#luckysheet-confirm').remove()

    const _locale = locale()
    const locale_button = _locale.button

    if (name1 == null) {
      name1 = locale_button.confirm
    }
    if (name2 == null) {
      name2 = locale_button.cancel
    }

    $('body')
      .first()
      .append(
        replaceHtml(modelHTML, {
          id: 'luckysheet-confirm',
          addclass: '',
          style: 'z-index:100003',
          title: title,
          content: content,
          botton:
            '<button class="btn btn-primary luckysheet-model-conform-btn">&nbsp;&nbsp;' +
            name1 +
            '&nbsp;&nbsp;</button><button class="btn btn-default luckysheet-model-cancel-btn">&nbsp;&nbsp;' +
            name2 +
            '&nbsp;&nbsp;</button>',
        })
      )
    let $t = $('#luckysheet-confirm')
        .find('.luckysheet-modal-dialog-content')
        .css('min-width', 300)
        .end(),
      myh = $t.outerHeight(),
      myw = $t.outerWidth()
    let winw = $(window).width(),
      winh = $(window).height()
    let scrollLeft = $(document).scrollLeft(),
      scrollTop = $(document).scrollTop()
    $('#luckysheet-confirm')
      .css({
        left: (winw + scrollLeft - myw) / 2,
        top: (winh + scrollTop - myh) / 3,
      })
      .show()
    $t.find('.luckysheet-model-conform-btn').click(function() {
      if (typeof func1 == 'function') {
        func1()
      }
      server.keepHighLightBox()
      $('#luckysheet-confirm').hide()
      $('#luckysheet-modal-dialog-mask').hide()
    })
    $t.find('.luckysheet-model-cancel-btn').click(function() {
      if (typeof func2 == 'function') {
        func2()
      }
      $('#luckysheet-confirm').hide()
      $('#luckysheet-modal-dialog-mask').hide()
    })
  },
  screenshot: function(title, content, imgurl) {
    const _locale = locale()
    const locale_screenshot = _locale.screenshot
    $('#luckysheet-modal-dialog-mask').show()
    $('#luckysheet-confirm').remove()
    $('body')
      .first()
      .append(
        replaceHtml(modelHTML, {
          id: 'luckysheet-confirm',
          addclass: '',
          style: 'z-index:100003',
          title: title,
          content: content,
          botton:
            '<a style="text-decoration:none;color:#fff;" class="download btn btn-primary luckysheet-model-conform-btn">&nbsp;&nbsp;' +
            locale_screenshot.downLoadBtn +
            '&nbsp;&nbsp;</a>&nbsp;&nbsp;<button class="btn btn-primary luckysheet-model-copy-btn">&nbsp;&nbsp;' +
            locale_screenshot.downLoadCopy +
            '&nbsp;&nbsp;</button><button class="btn btn-default luckysheet-model-cancel-btn">&nbsp;&nbsp;' +
            locale_screenshot.downLoadClose +
            '&nbsp;&nbsp;</button>',
        })
      )
    let $t = $('#luckysheet-confirm')
        .find('.luckysheet-modal-dialog-content')
        .css('min-width', 300)
        .end(),
      myh = $t.outerHeight(),
      myw = $t.outerWidth()
    let winw = $(window).width(),
      winh = $(window).height()
    let scrollLeft = $(document).scrollLeft(),
      scrollTop = $(document).scrollTop()
    $('#luckysheet-confirm')
      .css({
        left: (winw + scrollLeft - myw) / 2,
        top: (winh + scrollTop - myh) / 3,
      })
      .show()
    $t.find('.luckysheet-model-conform-btn').click(function() {
      if (browser.isIE() == '1') {
        alert(locale_screenshot.browserNotTip)
      } else {
        if (!!window.ActiveXObject || 'ActiveXObject' in window) {
          if ($('#IframeReportImg').length === 0) {
            $(
              '<iframe style="display:none;" id="IframeReportImg" name="IframeReportImg" onload="downloadImg();" width="0" height="0" src="about:blank"></iframe>'
            ).appendTo('body')
          }
          if ($('#IframeReportImg').attr('src') != imgurl) {
            $('#IframeReportImg').attr('src', imgurl)
          } else {
            if ($('#IframeReportImg').src != 'about:blank') {
              window.frames['IframeReportImg'].document.execCommand('SaveAs')
            }
          }
        }
      }
    })
    $t.find('.luckysheet-model-cancel-btn').click(function() {
      $('#luckysheet-confirm').hide()
      $('#luckysheet-modal-dialog-mask').hide()
    })

    $('#luckysheet-confirm .luckysheet-model-copy-btn').click(function() {
      let dt = new clipboard.DT()
      dt.setData('text/html', "<img src='" + imgurl + "'>")
      if (browser.isIE() == '1') {
        alert(locale_screenshot.rightclickTip)
      } else {
        clipboard.write(dt)
        alert(locale_screenshot.successTip)
      }
    })
  },
  chartPointConfig: function(id, savefunc1, closefunc2) {
    $('body')
      .first()
      .append(
        replaceHtml(modelHTML, {
          id: id,
          addclass: 'luckysheet-chart-point-config-c',
          title: '数据点批量设置',
          content: luckysheetchartpointconfigHTML,
          botton:
            '<button class="btn btn-danger luckysheet-model-save-btn">&nbsp;&nbsp;保存设置&nbsp;&nbsp;</button><button class="btn btn-default luckysheet-model-close-btn">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>',
          style: 'z-index:100003;height:80%;width:80%;top:10%;left:10%;',
        })
      )
    $('#luckysheet-modal-dialog-mask').show()
    let winw = $(window).width(),
      winh = $(window).height()
    $('#' + id)
      .find('.luckysheet-chart-point-config')
      .css('height', winh - 160)
    $('#' + id)
      .css({
        height: winh - 90,
        width: winw - 100,
        left: 7,
        top: 14,
      })
      .show()
      .find('.luckysheet-model-save-btn')
      .click(function() {
        if (typeof savefunc1 == 'function') {
          savefunc1()
        }

        $('#' + id).hide()
        $('#luckysheet-modal-dialog-mask').hide()
      })

    $('#' + id)
      .find('.luckysheet-model-save-btn')
      .click(function() {
        if (typeof closefunc2 == 'function') {
          closefunc2()
        }

        $('#' + id).hide()
        $('#luckysheet-modal-dialog-mask').hide()
      })
  },
  sheetConfig: function() {},
  hoverTipshowState: false,
  hoverTipshowTimeOut: null,
  createHoverTip: function(obj, to) {
    let _this = this

    $(obj)
      .on('mouseover', to, function(e) {
        if (_this.hoverTipshowState) {
          return
        }

        clearTimeout(_this.hoverTipshowTimeOut)
        _this.hoverTipshowTimeOut = setTimeout(function() {
          let $t = $(e.currentTarget),
            toffset = $t.offset(),
            $toolup = $('#luckysheet-tooltip-up')

          let tips = $t.data('tips')
          if (tips == null || tips.length == 0) {
            tips = $t.prev().data('tips')

            if (tips == null || tips.length == 0) {
              return
            }
          }

          if ($toolup.length == 0) {
            $('body')
              .first()
              .append(luckysheetToolHTML)
            $toolup = $('#luckysheet-tooltip-up')
          }

          $toolup
            .removeClass('jfk-tooltip-hide')
            .find('div.jfk-tooltip-contentId')
            .html(tips)
          let toolwidth = $toolup.outerWidth()
          $toolup.find('div.jfk-tooltip-arrow').css('left', toolwidth / 2)

          let toolleft = toffset.left + ($t.outerWidth() - toolwidth) / 2
          if (toolleft < 2) {
            toolleft = 2
            $toolup
              .find('div.jfk-tooltip-arrow')
              .css('left', $t.outerWidth() / 2)
          }

          $toolup.css({
            top: toffset.top + $t.outerHeight() + 1,
            left: toolleft,
          })
        }, 100)
      })
      .on('mouseout', to, function(e) {
        _this.hoverTipshowState = false
        clearTimeout(_this.hoverTipshowTimeOut)
        $('#luckysheet-tooltip-up').addClass('jfk-tooltip-hide')
      })
      .on('click', to, function(e) {
        _this.hoverTipshowState = true
        clearTimeout(_this.hoverTipshowTimeOut)
        $('#luckysheet-tooltip-up').addClass('jfk-tooltip-hide')
      })
  },
  popover: function(content, position, close, style, btntxt, exitsFuc) {
    let _locale = locale()
    let locale_button = _locale.button
    let locale_paint = _locale.paint

    if (btntxt == null) {
      btntxt = locale_button.close
    }

    let htmldiv =
      '<div id="luckysheetpopover" class="luckysheetpopover"><div class="luckysheetpopover-content">' +
      locale_paint.start +
      '</div><div class="luckysheetpopover-btn">' +
      btntxt +
      '</div></div>'
    $('#luckysheetpopover').remove()
    $('body')
      .first()
      .append(htmldiv)
    $('#luckysheetpopover .luckysheetpopover-content').html(content)

    let w = $('#luckysheetpopover').outerWidth(),
      h = $('#luckysheetpopover').outerHeight()
    let pcss = {}

    if (position == 'topLeft') {
      pcss.top = '20px'
      pcss.left = '20px'
    } else if (position == 'topCenter') {
      pcss.top = '20px'
      pcss.left = '50%'
      pcss['margin-left'] = -w / 2
    } else if (position == 'topRight') {
      pcss.top = '20px'
      pcss.right = '20px'
    } else if (position == 'midLeft') {
      pcss.top = '50%'
      pcss['margin-top'] = -h / 2
      pcss.left = '20px'
    } else if (position == 'center') {
      pcss.top = '50%'
      pcss['margin-top'] = -h / 2
      pcss.left = '50%'
      pcss['margin-left'] = -w / 2
    } else if (position == 'midRight') {
      pcss.top = '50%'
      pcss['margin-top'] = -h / 2
      pcss.right = '20px'
    } else if (position == 'bottomLeft') {
      pcss.bottom = '20px'
      pcss.left = '20px'
    } else if (position == 'bottomCenter') {
      pcss.bottom = '20px'
      pcss.left = '50%'
      pcss['margin-left'] = -w / 2
    } else if (position == 'bottomRight') {
      pcss.bottom = '20px'
      pcss.right = '20px'
    } else {
      pcss.top = '20px'
      pcss.left = '50%'
      pcss['margin-left'] = -w / 2
    }

    if (style == 'white') {
      pcss.background = 'rgba(255, 255, 255, 0.65)'
      pcss.color = '#000'
      $('#luckysheetpopover .luckysheetpopover-btn').css({
        border: '1px solid #000',
      })
    }

    setTimeout(function() {
      $('#luckysheetpopover .luckysheetpopover-content').css({
        'margin-left':
          -$('#luckysheetpopover .luckysheetpopover-btn').outerWidth() / 2,
      })
    }, 1)
    $('#luckysheetpopover')
      .css(pcss)
      .fadeIn()
    $('#luckysheetpopover .luckysheetpopover-btn').click(function() {
      if (typeof exitsFuc == 'function') {
        exitsFuc()
      }
    })

    if (close != null && typeof close == 'number') {
      setTimeout(function() {
        $('#luckysheetpopover')
          .fadeOut()
          .remove()
        if (typeof exitsFuc == 'function') {
          exitsFuc()
        }
      }, close)
    }
  },
  //校验错误弹框，定位错误位置
  errorPointBox: function(content, savefunc1, closefunc2) {
    $('#luckysheet-error').remove()
    $('body')
      .first()
      .append(
        replaceHtml(modelHTML, {
          id: 'luckysheet-error',
          addclass: '',
          title: '格式校验异常，请检查标红异常项！',
          content: content,
            // botton:
            //   '<button class="btn btn-default luckysheet-error-prev-btn">&nbsp;&nbsp;上一个&nbsp;&nbsp;</button><button class="btn btn-default luckysheet-error-next-btn">&nbsp;&nbsp;下一个&nbsp;&nbsp;</button><button class="btn btn-default luckysheet-model-close-btn">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>',
           botton:
            '<button class="btn btn-default luckysheet-model-close-btn">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>',  
          style: 'z-index:100003;',
        })
      )
      let $t = $('#luckysheet-error')
      .find('.luckysheet-modal-dialog-content')
      .css('min-width', 300)
      .end(),
    myh = $t.outerHeight(),
    myw = $t.outerWidth()
  let winw = $(window).width(),
    winh = $(window).height()
  let scrollLeft = $(document).scrollLeft(),
    scrollTop = $(document).scrollTop()
  $('#luckysheet-error')
    .css({
      left: (winw + scrollLeft - myw) / 2,
      top: (winh + scrollTop - myh) / 3,
    })
    .show()
    .find('.luckysheet-error-prev-btn')
    .click(function() {
        if (typeof savefunc1 == 'function') {
          savefunc1()
        }

        

      })

    $('#luckysheet-error')
      .find('.luckysheet-error-next-btn')
      .click(function() {
        if (typeof closefunc2 == 'function') {
          closefunc2()
        }

       

      })
    
  }
}

export default tooltip
